<template>
    <div>
      <div id="profit">
        <el-form>
          <h1 style="font-size: 40px;font-weight: bold;margin-bottom: 110px;">平台盈利</h1>
          <el-row style="margin: 60px;">
                <el-col :span="8">
                    <el-form-item label="请选择月份">
                    <el-date-picker
                        v-model="monthValue"
                        type="month"
                        placeholder="选择月"
                    >
                    </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="selectMonth">月查询</el-button>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="请选择年份">
                    <el-date-picker
                        v-model="yearValue"
                        type="year"
                        placeholder="选择年"
                    >
                    </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="selectAnnual">年查询</el-button>
                </el-col>
              </el-row>
        </el-form>
      </div>
      <!-- 图像 -->
      <div class="profit-container">
        <div v-if="!echartsData.xAxis.length ||!echartsData.yAxis.length ||!echartsData.title">
            <p style="font-size: 30px;">当前暂无数据，请选择时间查询。</p>
        </div>
        <Echarts v-else :echartsData="echartsData" :chartStyle="chartStyle" />
      </div>

    </div>
  </template>
  
  <script>
  import { formatDate } from '@/api/didi/utils/dateUtils';
  import Echarts from '@/views/didi/components/echarts/index.vue';
  import {monthlyProfit,annualProfit} from "@/api/didi/data.js";
  export default {
    components: {
      Echarts
    },
    data() {
      return {
        monthValue:'',
        yearValue:'',
        allTime: '',
        data: {
          year: '',
          month: '',
        },
        chartStyle: {
          width: '1500px',
          height: '650px',
          border: '1px solid black',
          padding: '20px'
        },
        echartsData:{
            xAxis:[],
            yAxis:[],
            title:"",
            xName:"时间",
            yName:"盈利",
            explain:""
        },
        role:"",
      

      };
    },
    methods: {
     //日期转化
      formattedDate(date) {
        return formatDate(date);
      },
      //年查询
      selectAnnual(){
        this.allTime='';
        this.reset();
        if (!this.yearValue) {
          this.$message.error('请选择一个年份');
          return;
        }
        this.allTime = this.formattedDate(this.yearValue);
        const [year, month] = this.allTime.split('-');
        this.data.year = year;
        this.data.month = month;
        console.log(this.data)
        annualProfit(this.data).then(response => {
            if(response.rows.length>0){
              console.log(response)
                this.echartsData.xAxis = response.rows.map(item => item.profit);
                this.echartsData.yAxis = response.rows.map(item => item.createDate);
                const totalProfit = response.rows.reduce((acc, item) => {
                    // 将 item.profit 转换为数值类型
                    const profitValue = parseFloat(item.profit);
                    return acc + profitValue;
                }, 0).toFixed(2);
                this.echartsData.explain="总年盈利: "+totalProfit+"元"
                console.log(totalProfit)
                this.echartsData.title = "平台在"+this.data.year+"年的盈利"
            }else{
                this.$message.error('本年份没有盈利记录');
            }
        })
  
      },
      //月查询
      selectMonth(){
        this.allTime='';
        this.reset();
        if (!this.monthValue) {
          this.$message.error('请选择一个月份');
          return;
        }
        this.allTime = this.formattedDate(this.monthValue);
        const [year, month] = this.allTime.split('-');
        this.data.year = year;
        this.data.month = month;
        monthlyProfit(this.data).then(response => {
            if(response.rows.length>0){
              console.log(response)
                this.echartsData.xAxis = response.rows.map(item => item.profit);
                this.echartsData.yAxis = response.rows.map(item => item.createDate);
                const totalProfit = response.rows.reduce((acc, item) => {
                    // 将 item.profit 转换为数值类型
                    const profitValue = parseFloat(item.profit);
                    return acc + profitValue;
                }, 0).toFixed(2);
                this.echartsData.explain="总月盈利: "+totalProfit+"元"
                this.echartsData.title = "平台在"+this.allTime+"的盈利"
            }else{
                this.$message.error('本月份没有盈利记录');
            }
        })
      },
      // 表单重置
      reset() {
        this.echartsData={
            xAxis:[],
            yAxis:[],
            title:"",
            xName:"时间",
            yName:"盈利",
            explain:""
        }
      }
    }
  };
  </script>
  
  <style scoped>
  #profit {
    width: 1200px;
    margin: 50px;
  }
  .profit-container {
    position: relative;
    min-height: 100vh; /* 确保父容器至少占满视口高度 */
    left: 10%;
    /* transform: translate(-30%, 0%); */
}
  </style>    